<!--
 * @Descripttion: 
 * @version: 
 * @Author: lsy
 * @Date: 2021-12-10 10:25:08
 * @LastEditors: lsy
 * @LastEditTime: 2021-12-15 17:04:29
-->
<template>
    <div id="user_div">
        <a-avatar icon="user" />
        <div class="user_tooltip">
            <a-avatar icon="user" />
            <div class="user_name_div">
                {{ userObj.userName }}
                <br />
                <span
                    style="background-color: rgb(198, 233, 241);color: blue;"
                >{{ userObj.roleName }}</span>
            </div>
            <div style="margin-left: 20px;">上次登录IP：{{ userObj.lastLoginIp }}</div>
            <!-- <div class="tooltip_div">密保问题</div> -->
            <div class="tooltip_div" @click="showDialog()">修改密码</div>
            <!-- <div class="tooltip_div">默认组织树设置</div> -->
            <!-- <div class="tooltip_div">关于</div> -->
            <div class="tooltip_exit" @click="exit()">退出登录</div>
        </div>
        <changePwd ref="changepwd" />
    </div>
</template>
<script>
import changePwd from "./changePwd.vue"
export default {
    name: "user",
    data() {
        return {
            userObj: {},
            visible: false,
            title: ""
        }
    },
    components: {
        changePwd
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            VE_API.user.getUserInfoById({}, `/${localStorage.getItem("userId")}`).then(res => {
                this.userObj = res.data.data;
            })
        },
        showDialog() {
            this.$refs.changepwd.visible = true;
        },
        exit() {
            VE_API.system.loginOut().then(res => {
                this.$router.push("/login")
            })
        }
    }
}
</script>
<style lang="scss" scoped>
#user_div {
    display: inline-block;
    .ant-avatar-icon {
        background-color: #87d068;
    }
    .user_tooltip {
        color: black;
        width: 200px;
        position: absolute;
        top: 50px;
        right: 30px;
        visibility: hidden;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        border: 1px solid rgb(221, 221, 221);
        box-shadow: 5px 5px 3px #aaa9a9;
        .ant-avatar-icon {
            margin-left: 20px;
            display: inline-block;
        }
        .user_name_div {
            margin-left: 30px;
            display: inline-block;
            line-height: 25px;
            position: absolute;
        }
        .tooltip_div {
            width: 100%;
            padding-left: 20px;
            &:hover {
                background-color: rgb(177, 233, 235);
            }
        }
        .tooltip_exit {
            width: 100%;
            color: red;
            text-align: center;
            &:hover {
                background-color: rgb(177, 233, 235);
                color: red;
            }
        }
    }
    &:hover {
        .user_tooltip {
            visibility: visible;
            z-index: 1000;
        }
    }
}
</style>